<template>
    <section class="invoice-detailed">
        <section class="invoice-box">
            <h1>发票抬头信息</h1>
            <section class="invoice-block invoice-header">
                <ul>
                    <li>
                        <span class="name">申请人</span>
                        <span class="info">{{ data.name }}</span>
                    </li>
                    <li>
                        <span class="name">发票抬头</span>
                        <span class="info">
                            <template v-if="data.isAudit">
                                <el-input v-model="data.header" clearable></el-input>
                            </template>
                            <template v-else>
                                {{ data.header }}
                            </template>
                        </span>
                    </li>
                    <li>
                        <span class="name">税号</span>
                        <span class="info">
                            <template v-if="data.isAudit">
                                <el-input v-model="data.ID" clearable></el-input>
                            </template>
                            <template v-else>
                                {{ data.ID }}
                            </template>
                        </span>
                    </li>
                    <li>
                        <span class="name">发票金额</span>
                        <span class="info">{{ data.price }}</span>
                    </li>
                    <li>
                        <span class="name">邮箱地址</span>
                        <span class="info">
                            <template v-if="data.isAudit">
                                <el-input v-model="data.email" clearable></el-input>
                            </template>
                            <template v-else>
                                {{ data.email }}
                            </template>
                        </span>
                    </li>
                    <li>
                        <span class="name">手机号码</span>
                        <span class="info">
                            <template v-if="data.isAudit">
                                <el-input v-model="data.phone" clearable></el-input>
                            </template>
                            <template v-else>
                                {{ data.phone }}
                            </template>
                        </span>
                    </li>
                    <li>
                        <span class="name">申请时间</span>
                        <span class="info">{{ data.applyTime }}</span>
                    </li>
                </ul>
            </section>
            <h1>订单信息</h1>
            <section class="invoice-block order">
                <section class="order-li" v-for="item in data.invoiceOrderList" :key="item.orderNo">
                    <section class="order-info">
                        <span v-if="item.packageNameNumber">
                            {{ productTypeMap.get(item.productType + '') }}车况 -
                            {{ packageNameMap.get(item.packageNameNumber + '') }}
                        </span>
                        <span v-else>
                            <template v-if="item.modelDetail">{{ item.modelDetail }}</template>
                            <template v-else>{{ item.brand }}</template>
                        </span>
                        <p>订单编号：{{ item.orderNo }}</p>
                        <p>支付时间：{{ item.payTime }}</p>
                    </section>
                    <section class="order-price">￥{{ item.amount }}</section>
                </section>
            </section>
            <section class="btn" v-if="data.isAudit">
                <el-button type="primary" @click="data.onConfirm">开票</el-button>
                <el-button @click="data.onCancel">取消</el-button>
            </section>
            <section class="btn" v-else>
                <el-button type="primary" @click="data.onCancel">返回</el-button>
            </section>
        </section>
    </section>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import InvoiceDetailed from '.'
import { productTypeMap, packageNameMap } from '@/utils/config'

const data = reactive(new InvoiceDetailed())
</script>

<style scoped lang="scss">
.invoice-detailed {
    box-sizing: border-box;
    height: 100%;
    background-color: #fff;
    padding: 16px 0;
    .invoice-box {
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0 16px;
    }
    h1 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 16px;
    }
    .invoice-header {
        margin-bottom: 16px;
        ul {
            display: flex;
            flex-wrap: wrap;
            li {
                width: 33.33%;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding-right: 24px;
                margin-bottom: 16px;
                .name {
                    width: 80px;
                }
                .info {
                    width: calc(100% - 80px);
                }
            }
        }
    }
    .order {
        .order-li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:not(:last-child) {
                border-bottom: 1px solid #f0f0f0;
                padding-bottom: 16px;
                margin-bottom: 16px;
            }

            .order-price {
                padding-right: 16px;
                font-size: 18px;
            }
            .order-info {
                span {
                    font-size: 16px;
                    font-weight: 600;
                }
                p {
                    color: #666;
                    margin-top: 8px;
                }
            }
        }
    }
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px 0;
    }
}
</style>
